<template>
    <div class="exam-container">
      <el-skeleton :loading="isFirst" :rows="15" animated>
      <el-descriptions title="题库详情" direction="vertical" :column="2" border>
        <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->
  
        <el-descriptions-item label="题库名" :span="1">
          {{name}}
        </el-descriptions-item>


     
        <el-descriptions-item label="难度" :span="1" width="25%">
            <el-tag>{{lv}}</el-tag>
        </el-descriptions-item>

         <el-descriptions-item label="标签" :span="2">
          <el-tag>{{labels}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="描述" :span="2">
          <el-tag>{{explain=="" || explain==null ?"-":explain}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="题目数" width="50%" :span="1">
          <el-tag>{{count}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="添加时间" width="50%" :span="1">
          <el-tag>{{createTime}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="发布" :span="1" width="25%">
          <el-tag type="success"  v-if="isPublish==1 ||isPublish==null">否</el-tag>
          <el-tag type="danger" v-else>是</el-tag>
        </el-descriptions-item>


        <el-descriptions-item label="禁用">
            <el-tag type="success" v-if="isBan==0 ||isBan==null">否</el-tag>
            <el-tag type="danger" v-else>是</el-tag>
        </el-descriptions-item>
       
  

  

      </el-descriptions>
    </el-skeleton>
    </div>
  </template>

  <script lang="ts">
  import { defineComponent, reactive, toRefs, watchEffect } from 'vue'
  import { getQuestionDetail ,getQuestionOptions} from '../../api/exam'
  import { ElMessageBox ,ElMessage} from 'element-plus'
  import {  Check,CloseBold ,Warning,Select} from '@element-plus/icons-vue'
  import { useRoute, useRouter } from 'vue-router'
  export default defineComponent({
    setup() {
        const router = useRouter();
        const routes= useRoute();
        const data = reactive<any>({
        isFirst:true,
        name:"",
        lv:1,
        labels:0,
        explain:0,
        count:0,
        createTime:0,
        isPublish:"",
        isBan:'',
        id:routes.params.tid
      })

      const events={
       /**
        * 获取单个题库的题库详情
        */
        getQuestionDetail:()=>{
             getQuestionDetail({id:data.id}).then((res:any)=>{
                     if(res.result===0){
                         data.name=res.data.name;
                         data.lv=res.data.lv;
                         data.labels=res.data.labels;
                         data.explain=res.data.explain;
                         data.count=res.data.count;
                         data.isPublish=res.data.isPublish;
                         data.isBan=res.data.isBan;
                         data.isFirst=false;
                     }
             })
        }
       
      }

      watchEffect(()=>{
        events.getQuestionDetail();
      })

      return {
        ...toRefs(data),
        ...events,
        Check,CloseBold,Warning,Select
      }
    },
  })
  </script>
  